<template>
  <el-card
    class="chart-item-container"
    :body-style="{ padding: 0 }"
    shadow="never"
  >
    <template #header>
      <div class="text-bold">全年数据回写API分析图</div>
    </template>
    <div ref="fullYearApiChart" class="chart-item"></div>
  </el-card>
</template>

<script>
import itemChartMixins from './mixins/item-charts-mixins'
const bgColor = '#fff'
const color = [
  '#0090FF',
  '#36CE9E',
  '#FFC005',
  '#FF515A',
  '#8B5CFF',
  '#00CA69'
]
const echartData = [
  {
    name: '1',
    value1: 100,
    value2: 233,
    value3: 188
  },
  {
    name: '2',
    value1: 138,
    value2: 233,
    value3: 123
  },
  {
    name: '3',
    value1: 350,
    value2: 200,
    value3: 156
  },
  {
    name: '4',
    value1: 173,
    value2: 180,
    value3: 256
  },
  {
    name: '5',
    value1: 180,
    value2: 199,
    value3: 239
  },
  {
    name: '6',
    value1: 150,
    value2: 233,
    value3: 307
  },
  {
    name: '7',
    value1: 180,
    value2: 210,
    value3: 223
  },
  {
    name: '8',
    value1: 230,
    value2: 180,
    value3: 123
  },
  {
    name: '9',
    value1: 230,
    value2: 180,
    value3: 123
  },
  {
    name: '10',
    value1: 230,
    value2: 180,
    value3: 123
  },
  {
    name: '11',
    value1: 230,
    value2: 180,
    value3: 123
  },
  {
    name: '12',
    value1: 230,
    value2: 180,
    value3: 123
  }
]

const xAxisData = echartData.map((v) => v.name)
// ["1", "2", "3", "4", "5", "6", "7", "8"]
const yAxisData1 = echartData.map((v) => v.value1)
const yAxisData2 = echartData.map((v) => v.value2)
const yAxisData3 = echartData.map((v) => v.value3)
const hexToRgba = (hex, opacity) => {
  let rgbaColor = ''
  const reg = /^#[\da-f]{6}$/i
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
      '0x' + hex.slice(3, 5)
    )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
  }
  return rgbaColor
}
export default {
  name: 'FullYearAPiChart',
  mixins: [itemChartMixins],
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.$echarts.dispose(this.getInstance(this.$refs.fullYearApiChart))
  },
  methods: {
    init() {
      const option = {
        backgroundColor: bgColor,
        color: color,
        legend: {
          right: 40,
          top: 53,
          textStyle: {
            color: '#9FACBC'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let html = ''
            params.forEach((v) => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.name}月.${v.seriesName}
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                次`
            })

            return html
          },
          extraCssText:
            'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}月',
              textStyle: {
                color: '#9FACBC'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#293755'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：次',
            axisLabel: {
              textStyle: {
                color: '#9FACBC'
              }
            },
            nameTextStyle: {
              color: '#9FACBC',
              fontSize: 12,
              lineHeight: 40
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#293755'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '数据API',
            type: 'line',
            smooth: true,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.2)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData1
          },
          {
            name: '服务API',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[1], 0.2)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[1], 0)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[1], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData2
          },
          {
            name: '数据回写API',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[2],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[2], 0.5),
                shadowOffsetY: 8
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[2], 0.2)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[2], 0)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[2], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData3
          }
        ]
      }
      this.getInstance(this.$refs.fullYearApiChart).setOption(option)
    },
    updateChart() {
      this.getInstance(this.$refs.fullYearApiChart).resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-item-container {
  width: 100%;
  height: 445px;
  .chart-item {
    height: 410px;
  }
}
</style>
